<template>
  <el-card>
    <h2>订单详情</h2>
    <el-row>
      <el-col :span="12">
        <p>订单号: {{ orderDetails.orderNumber }}</p>
        <p>终端编号: {{ orderDetails.pileCode }}</p>
        <p>充电站: {{ orderDetails.stationName }}</p>
        <p>充电状态: {{ orderDetails.chargingStatus }}</p>
        <p>支付状态: {{ orderDetails.paymentStatus }}</p>
      </el-col>
      <el-col :span="12">
        <p>充电金额: ¥ {{ orderDetails.transactionAmount }}</p>
        <p>下单时间: {{ orderDetails.createTime }}</p>
        <p>完成时间: {{ orderDetails.updateTime }}</p>
        <p>备注: {{ orderDetails.remark || '无' }}</p>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import axios from "axios";

export default {
  name: "OrderDetails",
  props: {
    orderNumber: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      orderDetails: {},
    };
  },
  methods: {
    async fetchOrderDetails() {
      try {
        const response = await axios.get(`/transaction/details/${this.orderNumber}`);
        this.orderDetails = response.data;
      } catch (error) {
        console.error("获取订单详情失败", error);
      }
    },
  },
  mounted() {
    this.fetchOrderDetails();
  },
};
</script>

<style scoped>
h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>
